<template>
	<view class="page_wrapper page_bg">
		<Navbar title="平十法练习"></Navbar>
		<view class="pagebox">
			<view class="first_row">
				<view class="num_limit_block">
					<block v-if="currentCalcIndex < calcList.length">
						第{{currentCalcIndex+1}}题
					</block>
					<block v-else>本组练习已完成</block>
				</view>
				<view class="right_block">
					<u-checkbox usedAlone activeColor="#2E996C" @change="showTip()" labelColor="#2E996C" labelSize="32rpx" v-model:checked="tipFlag" label="提示" shape="circle"></u-checkbox>
				</view>
			</view>
			<view class="first_block">
				<view class="numbox">
					<view class="second_row" v-if="tipFlag">
						<view class="tip_wrapper" v-for="(val) in 10" :key="val">
							<view class="tip" :class="{'active': val <= answerNum , 'chazhi': (val > answerNum) }"></view>
						</view>
						<view class="tip_wrapper" v-for="(val) in 10" :key="val">
							<view class="tip" :class="{'chazhi': (val <= (firstNum - 10)) }"></view>
						</view>
					</view>
					<view class="calc_block" :style="!tipFlag?'margin-top:100rpx':''">
						<view class="calc_wrapper">
							<view class="calc_first_row">
								<view class="num_block num_noboder num_guding">{{firstNum}}</view>
								<view class="num_block num_noboder">-</view>
								<view class="num_block num_noboder num_guding">{{secondNum}}</view>
								<view class="num_block num_noboder">=</view>
								<view class="num_block" :class="{'current_input': currentInput === 2}">
									<block v-if="userInputAnswerNum === answerNum ">
										{{userInputAnswerNum}}
									</block>
								</view>
							</view>
							
							<view class="calc_second_row">
								<view class="left_block">
									<view class="center_line"></view>
								</view>
								<view class="right_block">
									<view class="right_sub_row">
										<view class="num_block num_noboder"></view>
										<view class=" xie_xian_line"></view>
									</view>
									<view class="right_sub_row">
										<view class="num_block" :class="{'current_input': currentInput === 0}">
											<block v-if="inputFirstNum === userInputFirstNum">
												{{inputFirstNum}}
											</block>
										</view>
										<view class="num_block num_noboder" style="width: 53px;"></view>
										<view class="num_block" :class="{'current_input': currentInput === 1}">
											<block v-if="inputSecondNum === userInputSecondNum">
												{{inputSecondNum}}
											</block>
										</view>
									</view>
								</view>
							</view>
							<view class="calc_third_row">
								<view class="zhuanzhe_empty_block"></view>
								<view class="zhuanzhe1_block">-</view>
								<view class="zhuanzhe2_block"></view>
								<view class="zhuanzhe3_block"></view>
							</view>
							<view class="calc_fourth_row">
								<view class="num_block num_noboder num_guding" style="margin-left: 24px;margin-top: 10px;">10</view>
								<view class="zhuanzhe1_block">-</view>
							</view>
						</view>
					</view>
				</view>
				<image class="test_bg" src="https://www.hzif.cn/mathematics-attach/test_bg.png" mode=""></image>
			</view>
			<view class="keyboard_block">
				<view class="keyboard_wrapper" v-for="(key, index) in 10" :key="val">
					<view class="key" @tap="keyDown(key%10)">{{key%10}}</view>
				</view>
			</view>
		</view>
		<view class="btns_block">
			<button class="share_btn" open-type="share">分享给好友</button>
			<block v-if="currentCalcIndex >= 10">
				<button class="calc_again_btn" @tap="tryAgain()">再练一组</button>
			</block>
		</view>
		<image src="../../../static/nimg/bg.png" class="page_bg_img" mode=""></image>
		<!-- <view class="kou_jue_block">
			<view class="kou_jue_row">
				<view class="kou_jue_title">
					<view>平十法口诀：</view>
					<view>
						<view><image class="play_music" src="@/static/images/play_btn.png" @tap="playKouJueMusic(kouJueMusicUrl)" ></image></view>
					</view>
				</view>
				<view class="kou_jue_content">分小数，连续相减算得数。</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	import {request} from '@/utils/request.js'
	import {utils} from '@/utils/utils.js'
	import {storageData} from '@/utils/storageData.js'
import { pinTen } from '../../../utils/create.js'
	import Navbar from '@/components/navbar.vue'
	export default {
		components: {
			Navbar
		},
		data() {
			return {
				tipFlag: true,
				userInput: '',
				firstNum: 0, // 第一个数是6到9之间的数。
				secondNum: 0, // 第二个数是比第一个数小，但加起来是大于10的数。
				inputFirstNum: 0,
				inputSecondNum: 0,
				answerNum: 0,
				userInputFirstNum: 0,
				userInputSecondNum: 0,
				userInputAnswerNum: 0,
				currentInput: 0,
				playMusicStatus: false,
				kouJueMusicUrl: '',
				audioContext: {},
				currentPlayMusic: '',
				mathExam: {
				},
				calcList: [],
				currentCalcIndex: -1
			}
		},
		onLoad() {
			this.fetchCalcData()
			// this.fetchMusicData()
		},
		methods: {
			tryAgain() {
				this.fetchCalcData()
			},
			fetchCalcData() {
				this.currentCalcIndex = -1
				// uni.showLoading()
				let data = pinTen()
				this.calcList = data
				this.nextCalc()
				// request.postJson( 
				// 	'/mathExams/pingShiFa', {}
				// ).then(res => {
				// 	uni.hideLoading()
				// 	console.log(res)
				// 	this.mathExam = res
				// 	this.calcList = res.calcLogList
				// 	this.nextCalc()
				// }).catch(err => {
				// 	uni.hideLoading()
				// 	console.log(err)
				// })
			},
			fetchMusicData(){
				// 口诀
				// request.get(
				// 	'/musicSources/idNo,1716813912931', {}
				// ).then(res => {
				// 	this.kouJueMusicUrl = res.musicUrl
				// }).catch(err => {
				// 	console.log(err)
				// })
				
			},
			
			nextCalc() {
				this.currentCalcIndex++
				
				if(this.currentCalcIndex >= this.calcList.length){
					const $this = this
					
					uni.showModal({
						title: '提示',
						content: '您已练完一组，是否再练一组?',
						cancelText: '我累了',
						confirmText: '我还能再练',
						success: function (res) {
							if (res.confirm) {
								$this.fetchCalcData()
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					})
					return false
				}
				
				const calc = this.calcList[this.currentCalcIndex]
				this.firstNum = calc.firstNum
				this.secondNum = calc.secondNum
				this.answerNum = calc.resultNum
				this.inputFirstNum = this.firstNum - 10
				this.inputSecondNum = this.secondNum - this.inputFirstNum
				
				
				this.userInputFirstNum = 0
				this.userInputSecondNum = 0
				this.userInputAnswerNum = 0
				this.currentInput = 0
				
			},
			getRandomNumber(maxNum) {  
			    return Math.floor(Math.random() * maxNum) + 1;  
			},
			getSecondRandomNumber(maxNum) {  
			    return Math.floor(Math.random() * maxNum);  
			},
			getRandomBoolean() {  
			    return Math.random() >= 0.5;  
			},
			showTip() {
				this.tipFlag = !this.tipFlag
			},
			playKouJueMusic(musicUrl) {
				if(this.playMusicStatus === true){
					// this.audioContext.stop()
					this.playMusicStatus = false
					
					if(this.currentPlayMusic === musicUrl){
						// this.audioContext.destroy()
						// this.audioContext = null
						return false
					}
					
				}
				this.currentPlayMusic = musicUrl
				this.playMusicStatus = true
				console.log('play music:' + musicUrl)
				const $this = this
				const audioContext = uni.createInnerAudioContext()
				audioContext.autoplay = true
				audioContext.src = musicUrl
				audioContext.onEnded(() => {
					console.log('music end')
					$this.playMusicStatus = false
					audioContext.destroy()
				})
				
			},
			keyDown(num) {
				// 比较结果
				console.log(num)
				let result = ''
				if(this.currentInput === 0) {
					if(this.inputFirstNum === num) {
						result = '正确'
						this.userInputFirstNum = num
						this.currentInput++
					}else{
						result = '错误'
					}
				}else if(this.currentInput === 1) {
					if(this.inputSecondNum === num) {
						result = '正确'
						this.userInputSecondNum = num
						this.currentInput++
					}else{
						result = '错误'
					}
				}else if(this.currentInput === 2) {
					console.log("answerNum:"+this.answerNum)
					if(this.answerNum === num) {
						result = '正确'
						this.userInputAnswerNum = num
						this.currentInput++
					}else{
						result = '错误'
					}
				}
				if(result !== '') {
					uni.showToast({
						icon: 'none',
						title: result,
						duration: 1000
					})
					if(result === '错误') {
						return false
					}
				}
				const $this = this
				if(this.currentInput > 2){
					setTimeout(() => {
						$this.currentInput = 0
						$this.nextCalc()
					}, 500)
				}
				
			}
		},
		onShareAppMessage(res) {
			const userInfo = storageData.getLoginUser()
			if (res.from === 'button') {
					 // 来自页面内分享按钮
					 console.log(res.target);
			}
			return {
				title: '小奕口算：平十法练习',
				path: '/pages/qiMengIndex/qiMengIndex?shareUc=' + userInfo.userCode,
				mpId: 'wxcbbe1a868c5c3c3c', //此处配置微信小程序的AppId
			}
		},
		onShareTimeline(res) {
			const userInfo = storageData.getLoginUser()
			return {
				title: '小奕口算：平十法练习',
				path: '/pages/qiMengIndex/qiMengIndex?shareUc=' + userInfo.userCode,
				mpId: 'wxcbbe1a868c5c3c3c', //此处配置微信小程序的AppId
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.page_wrapper{
		overflow-y: scroll;
		.first_row{
			padding: 10px 10px 0px 10px;
			display: flex;
			align-items: center;
			margin-bottom: 10px;
			.left_block, .right_block{
				flex: 1;
				display: flex;
				justify-content: flex-end;
				align-items: center;
			}
			.num_limit_block{
				width: 150px;
				height: 30px;
				display: flex;
				// justify-content: center;
				align-items: center;
				color: #2E996C;
				font-size:32rpx;
				font-weight: 400;
			}
		}
		.first_block{
			margin: 10px;
			display: flex;
			flex-direction: column;
			position: relative;
			justify-content: center;
			align-items: center;
			.numbox{
				top: 40rpx;
				position: absolute;
				color: #ffffff;
				padding: 20rpx;
			}
			.test_bg{
				height: 820rpx;
				width: 100%;
			}
			.second_row{
				padding: 10px 20px 10px 20px;
				display: flex;
				flex-wrap: wrap;
				.tip_wrapper{
					width: 10%;
					margin-bottom: 10px;
					display: flex;
					justify-content: center;
					align-items: center;
					.tip{
						width: 20px;
						height: 20px;
						background-color: #C4E6C2;
					}
					.tip.active{
						background-color: #FF8835;
					}
					.chazhi{
						background-color: #2E996C!important;
					}
				}
			}
			.calc_block{
				display: flex;
				justify-content: center;
				align-items: center;
				font-family: eryaxinhei;
				// margin-bottom: 30px;
				.calc_wrapper{
					width: 260px;
					height: 250px;
					// border: 1px solid #eeeeee;
					.num_block{
						font-size: 20px;
						width: 47px;
						height: 38px;
						border: 4rpx solid #C4E6C2;
						border-radius: 6px;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						
					}
					.num_noboder{
						width: 58px;
						height: 42px;
						border: none!important;
					}
					.num_guding{
						background: #328372;
					}
					.current_input{
						// background-color: skyblue;
					}
					.calc_first_row{
						display: flex;
					}
					.calc_second_row{
						width: 100%;
						height: 95px;
						display: flex;
						.left_block{
							width: 54px;
							display: flex;
							justify-content: center;
							.center_line{
								width: 3px;
								height: 100%;
								border-left: 4rpx solid #C4E6C2;
							}
						}
						.right_block{
							flex: 1;
							// border: 1px solid blue;
							.right_sub_row{
								height: 50px;
								display: flex;
								.xie_xian_line{
									width: 70px; /* 根据需要设置宽度 */
									height: 70px; /* 高度为1px以实现线的效果 */  
									background: transparent; /* 背景透明 */  
									border-top: 4rpx solid #C4E6C2; /* 上边框为斜线 */  
									border-right: 4rpx solid #C4E6C2; /* 上边框为斜线 */
									transform: rotate(-45deg); /* 旋转45度以创建斜线 */  
									// background-color: red;
									margin-top: 13px;
									margin-left: -16px;
								}
							}
						}
					}
					.calc_third_row{
						width: 100%;
						height: 24px;
						display: flex;
						padding-left: 1rpx;
						.zhuanzhe_empty_block{
							width: 24px;
							height: 22px;
						}
						.zhuanzhe1_block{
							font-size: 20px;
							width: 25px;
							height: 20px;
							border-left: 4rpx solid #C4E6C2;
							border-bottom: 4rpx solid #C4E6C2;
							display: flex;
							justify-content: center;
							align-items: center;
						}
						.zhuanzhe2_block{
							width: 28px;
							height: 20px;
							border-right: 4rpx solid #C4E6C2;
							border-bottom: 4rpx solid #C4E6C2;
						}
						.zhuanzhe3_block{
							width: 103px;
							height: 20px;
							border-right: 4rpx solid #C4E6C2;
							
						}
					}
					.calc_fourth_row{
						display: flex;
						.zhuanzhe1_block{
							font-size: 20px;
							width: 103px;
							height: 35px;
							border-right: 4rpx solid #C4E6C2;
							border-bottom: 4rpx solid #C4E6C2;
							margin-top: -4px;
							display: flex;
							justify-content: center;
							align-items: center;
						}
					}
				}
			}
		}
		.keyboard_block {
			margin-top: 40rpx;
			display: flex;
			flex-wrap: wrap;
			.keyboard_wrapper {
				width: 20%;
				height: 94rpx;
				margin-bottom: 5px;
				color: #fff;
				.key {
					width: 95%;
					height: 94rpx;
					background-color: #36ac7a;
					border-radius: 10rpx;
					font-size: 66rpx;
					font-family: eryaxinhei;
					box-shadow: inset 0 0 5rpx 6rpx #56ce9b;
					text-shadow: -4rpx 1rpx 10rpx #00000055;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				.key:active {
					background-color: #2A6C5E;
				}
			}
		}
		.btns_block{
			position: fixed;
			bottom: 100rpx;
			z-index: 4;
			width: 100%;
			.share_btn{
				font-size: 14px;
				width: 80%;
				height: 98rpx;
				color: white;
				background-color: #2E996C;
				border-radius: 50px;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.calc_again_btn{
				font-size: 14px;
				width: 150px;
				height: 35px;
				color: white;
				background-color: green;
				border-radius: 5px;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
		.kou_jue_block{
			margin: 10px 10px 20px 10px;
			padding: 15px;
			background-color: white;
			display: flex;
			flex-direction: column;
			.kou_jue_row{
				margin-bottom: 15px;
				.kou_jue_title{
					font-size: 17px;
					font-weight: 400;
					margin-bottom: 5px;
					display: flex;
					justify-content: space-between;
					.play_music{
						width: 25px;
						height: 25px;
					}
					.play_music:active{
						width: 22px;
						height: 22px;
					}
				}
				.kou_jue_content{
					font-size: 15px;
					display: flex;
					justify-content: center;
					font-size: 16px;
					letter-spacing: 10px;
					margin-bottom: 5px;
				}
			}
		}
	}
	:deep(.u-checkbox .u-icon text){
		color: #00000000 !important;
		background-color: #C4E6C2;
		border-radius: 50%;
		font-size: 16rpx !important;
		line-height: 16rpx !important;
	}
</style>
